<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">阿米巴海运渠道管理</span>
        </el-col>
      </div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="价格设置" name="priceSet">
          <keep-alive>
            <div>
              <div class="color_blue padding-sm border_blue">
                <el-row :gutter="12">
                  <el-col :span="100">
                    <el-button-group>
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exportAmoebaChannelPrice()"
                        >导出所有渠道公式</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="toUploadfile(0)"
                        >批量上传</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="downloadUploadformula"
                        >下载导入模板</el-button
                      >
                    </el-button-group>
                  </el-col>
                  <el-col :span="50" style="font-weight: bold; font-size: 12px"
                    ><mark
                      >如果表头发生修改(不包含新增)、删除，所有渠道数据都会被导入数据覆盖。</mark
                    >否则只修改导入渠道的数据</el-col
                  >
                </el-row>
              </div>
            <template>
              <el-card shadow="never" class="table-container border_blue no-fixed">
                <el-tabs  v-model="timeActiveName"  @tab-click="autoInitData" style="background-color: #F5F7FA;border-bottom: 1px solid #E4E7ED;margin: 0;">
                  <el-tab-pane v-for="relateIterm in amoebaPriceChannelRecordList" :key="relateIterm.id" :label="relateIterm.desc" :name="`${relateIterm.id}`" >
                      <table
                      border="1"
                      cellpadding="2"
                      cellspacing="1"
                      style="table-layout:fixed;"
                      class="table-data"
                    >
                      <thead>
                        <th>渠道名称</th>
                        <th>国内分区</th>
                        <template v-for="(item, index) in amoebaChannelSubjects">
                          <th>{{ item.showName }}</th>
                        </template>
                      </thead>
                      <tbody>
                        <template v-for="(item, index) in amoebaChannels">
                          <template v-for="(m, i) in item.amoebaChannelZones">
                            <tr class="el-table__row">
                              <!-- 第1列每个学生只需要展示1次 -->
                              <td
                                v-if="i == 0"
                                :rowspan="item.amoebaChannelZones.length"
                              >
                                <span> {{ channelMap[item.id] }}</span>
                              </td>
                              <!-- 第2列每个学生只需要展示1次 -->
                              <td>
                                <template
                                  v-for="(item1,
                                  izone) in m.amoebaChannelZoneDetails"
                                >
                                  <template v-if="izone != 0">
                                    ,
                                  </template>
                                  <template v-if="item1.countryId">
                                    <span> {{ countryMap[item1.countryId] }}</span>
                                  </template>
                                  <template v-if="item1.stateId">
                                    <span> {{ provinceMap[item1.stateId] }}</span>
                                  </template>
                                </template>
                              </td>
                              <template
                                v-for="(item2, index2) in amoebaChannelSubjects"
                              >
                                <td>
                                  <template
                                    v-if="
                                      item.channelCalculateFormulaMap &&
                                        item.channelCalculateFormulaMap[
                                          `${m.id}_${item2.id}`
                                        ]
                                    "
                                  >
                                    <span>
                                      {{
                                        item.channelCalculateFormulaMap[
                                          m.id + "_" + item2.id
                                        ].formula
                                      }}
                                    </span>
                                  </template>
                                </td>
                              </template>
                            </tr>
                          </template>
                        </template>
                      </tbody>
                    </table>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </template>
            </div>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="历史价格表" name="priceHistoryList">
          <el-col :span="14">
            <el-card shadow="never" class="table-container">
              <div class="flex justify-between">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="count"
                />
                <el-button
                  size="mini"
                  type="success"
                  @click="batchUploadAmoebaChannelFormula()"
                  >导入历史价格表</el-button
                >
              </div>
            </el-card>
            <el-card shadow="never" class="table-container">
              <el-radio-group v-model="searchCriteria" style="width: 100%">
                <template v-for="(item, index) in amoebaPriceChannelRecords">
                  <el-radio
                    :label="item.id"
                    style="width: 100%;font-size: medium; margin-bottom: 10px;border-bottom: 1px solid #ddd;"
                  >
                    <span style="font-size: small;"
                      >{{ item.fileName }} (上传时间:{{ item.cdate }} /
                      {{ userMap[item.cuser] }} / 生效时间:{{ item.startTime }})</span
                    >
                    <span style="float: right">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="showAmoebaChannelPrice(item.id)"
                        >查看</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exportAmoebaChannelPrice(item.id)"
                        >导出</el-button
                      >
                    </span>
                  </el-radio>
                  <br />
                </template>
              </el-radio-group>
            </el-card>
          </el-col>
          <el-col
            :span="10"
            shadow="never"
            class="table-container padding-left"
          >
            <el-card shadow="never" class="table-container">
              <div>批量重新生成阿米巴渠道费用</div>
            </el-card>
            <el-card shadow="never" class="table-container">
              <el-col :span="10">
                <el-input
                  type="textarea"
                  :rows="20"
                  placeholder="运单号,多个运单(最多2000个)请用逗号、换行隔开,修改结果会显示在右边"
                  v-model="waybillNos"
                >
                </el-input>
                <div class="margin-tb">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="batchReBuildAmoebaChannelCost(this)"
                    >确定</el-button
                  >
                </div>
              </el-col>
              <el-col :span="14" class="padding-left-xl">
                <template v-if="reBuildAmoebaChannelCostRecord">
                  <p class="margin-bottom">
                    最后一次任务创建时间：{{
                      reBuildAmoebaChannelCostRecord.cdate
                    }}
                  </p>
                  <p class="margin-bottom">
                    创建人：{{ userMap[reBuildAmoebaChannelCostRecord.cuser] }}
                  </p>
                  <p class="margin-bottom">
                    状态：
                    <template v-if="reBuildAmoebaChannelCostRecord.status == 1">
                      执行完成
                    </template>
                    <template v-else>
                      执行中(请稍后刷新页面查看结果)
                    </template>
                  </p>
                  <template v-if="successResult">
                    <p style="word-wrap:break-word;word-break:break-all;">成功运单：{{successResult}}</p>
                  </template>
                  <template v-if="notResult">
                    <p style="word-wrap:break-word;word-break:break-all;">未执行运单：{{notResult}}</p>
                  </template>
                  <template v-if="errorResult">
                    <p style="word-wrap:break-word;word-break:break-all;">失败运单：{{errorResult}}</p>
                  </template>
                </template>
              </el-col>
            </el-card>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <AmoebaUploadfile
      :channelType="1"
      :isDelete="this.isDelete"
      ref="AmoebaUploadfile"
    ></AmoebaUploadfile>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
const AmoebaUploadfile = () => import("./AmoebaUploadfile");
export default {
  components: {
    AmoebaUploadfile
  },

  data() {
    return {
      channelType: 1,
      isDelete: 0,
      amoebaChannelSubjects: [],
      amoebaChannels: [],
      amoebaPriceChannelRecords: [],
      amoebaPriceChannelRecordList: [],
      channelMap: {},
      provinceMap: {},
      userMap: {},
      countryMap: {},
      channelCalculateFormulaMap: {},
      activeTab: "priceSet",
      searchCriteria: "",
      timeActiveName: "",
      waybillNos: "",
      notResult: '',
      successResult: '',
      errorResult: '',
      count: 0,
      pageSize: 20,
      pageIndex: 1,
      reBuildAmoebaChannelCostRecord: {
        cdate: "",
        cuser: "",
        status: ""
      }
    };
  },
  computed: {},

  watch: {},
  created() {},
  mounted() {
    this.autoInitData();
    this.initPriceHistoryList();
  },
  methods: {
    autoInitData() {
      var data = {};
      if(this.timeActiveName&&this.timeActiveName!=0){
        data["amoebaPriceChannelRecordId"] = this.timeActiveName;
      }
      ajax("manageAmoebaFlclChannel", data)
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            this.amoebaPriceChannelRecordList = data.amoebaPriceChannelRecordList;
            this.amoebaChannelSubjects = data.amoebaChannelSubjects;
            this.amoebaChannels = data.amoebaChannels;
            this.channelMap = data.channelMap;
            this.provinceMap = data.provinceMap;
            this.countryMap = data.countryMap;
            this.channelCalculateFormulaMap = data.channelCalculateFormulaMap;
            if (!this.timeActiveName||this.timeActiveName==0) {
              this.timeActiveName = data.amoebaChannelSubjects[0].amoebaPriceChannelRecordId.toString();
            }
            console.log(":::"+this.timeActiveName);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    initPriceHistoryList() {
      var data = {};
      data["pageSize"] = this.pageSize;
      data["pageIndex"] = this.pageIndex;
      data["channelType"] = this.channelType;
      ajax("manageAmoebaPriceChannelRecord", data)
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.amoebaPriceChannelRecords = data.amoebaPriceChannelRecords;
            this.userMap = data.userMap;
            this.reBuildAmoebaChannelCostRecord =
              data.reBuildAmoebaChannelCostRecord;
            this.notResult = data.notResult;
            this.successResult = data.successResult;
            this.errorResult = data.errorResult;
            this.count = data.count;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    exportAmoebaChannelPrice(val) {
      var curRow = {};
      debugger;
      if (val) {
        curRow["amoebaPriceChannelRecordId"] = val;
      }
      if (this.channelType) {
        curRow["channelType"] = this.channelType;
      }
      var isNeedFormula = "1";
      if (isNeedFormula) {
        curRow["isNeedFormula"] = isNeedFormula;
      }
      ajax("exportAmoebaChannelPrice", curRow)
        .then(res => {
          console.log("res", res);
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              qiao.bs.alert("导出失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    batchUploadAmoebaChannelFormula() {
      this.isDelete = 1;
      this.$refs.AmoebaUploadfile.centerDialogVisible = true;
    },

    toUploadfile() {
      this.isDelete = 0;
      this.$refs.AmoebaUploadfile.centerDialogVisible = true;
    },
    showAmoebaChannelPrice(id) {
      window.open(
        "/#" + "/blank" + "/amoeba__amoebaPriceChannelRecords__main?id=" + id
      );
    },
    batchReBuildAmoebaChannelCost() {
      var actionRadio = this.searchCriteria;
      var waybillNos = this.waybillNos;
      var data = {};
      data["channelType"] = this.channelType;
      if (actionRadio == "") {
        //this.$message.error("您没选择历史价格表");
      }else{
        data["amoebaPriceChannelRecordId"] = actionRadio;
      }
      if (waybillNos == "") {
        this.$message.error("请先录入运单号");
        return;
      } else {
        data["waybillNos"] = waybillNos;
      }
      ajax("batchReBuildAmoebaChannelCost", data)
        .then(res => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.timeout = setTimeout(() => {
              window.location.reload(true);
            }, 1000 * Math.random());
          } else {
            if (res.message){
              this.$message.error(res.message);
            }else {
              this.$message.error("操作失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    downloadUploadformula() {
      ajax("exportAmoebaChannelPrice", {channelType:this.channelType})
        .then(res => {
          console.log("res", res);
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              qiao.bs.alert("导出失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`页数: ${val}`);
      this.initPriceHistoryList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      console.log(`当前页: ${val}`);
      this.initPriceHistoryList();
    }
  }
};
</script>
<style scoped>
table {
  min-width: 100%;
}
td {
  min-width: 100px;
  padding: 6px;
  margin: 6px;
}
tbody {
}
th {
  min-width: 100px;
  font-size: larger;
  padding: 6px;
  margin: 6px;
}
.table-container {
  overflow: auto;
  display: block;
}
mark {
  background-color: #fcf8e3;
}
.color_blue {
  background-color: #d9edf7;
  color: #31708f;
  background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.border_blue {
  border: 1px solid #bce8f1;
  border-radius: 5px;
}
.table-data {
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-collapse: collapse;
  text-align: left;
}
.table-data td,
th {
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
</style>
